<template>
  <div class="form-box">
    <!-- 添加  |  编辑使用的弹框 -->
    <el-form ref="formData" :disabled="disabled" label-position="right" :model="formData">
      <el-form-item
        v-for="(field, index) in config.fieldsConfig"
        :key="index"
        :prop="field.name"
        :rules="validateAction(field.rules, field.label)"
        :class="['moreForm', field.inline ? 'interForm' : 'moreForm']"
        :label="field.label ? `${field.label}：` : null"
        :label-width="field.labelwidth ? `${field.labelwidth}px` : '1.5rem'"
      >
        <template slot="label">
          <span>{{ field.label ? `${field.label}：` : null }}</span>
        </template>
        <component
          :is="field.fieldType"
          :key="index"
          :ref="field.name"
          :label="field.label"
          :render="field.render"
          :value="formDataAction(formData, field.name)"
          :form-data="formData"
          :multiple="field.multiple"
          :picker-options="field.pickerOptions"
          :format="field.format"
          :area-length="field.areaLength"
          :date="field.date"
          :type="field.type"
          :range="field.range"
          v-bind="field"
          :options="field.options"
          :optionsurl="field.optionsurl"
          :disabled="field.disabled"
          @input="updateForm"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <slot v-if="config['buttons']" name="buttons">
        <el-button @click="cancel">{{ onBackText }}</el-button>
        <el-button type="primary" :disabled="disBut" @click="submit">{{ onSubmitText }}</el-button>
      </slot>
      <slot v-for="item in slotList" :name="item" />
    </div>
  </div>
</template>
<script>
import SelectList from './basicComponent/SelectList'
import SelectListNew from './basicComponent/SelectListNew'
import TextInput from './basicComponent/TextInput'
import TimeSelector from './basicComponent/TimeSelector'
// import DaterangeSelector from './basicComponent/DaterangeSelector'
import Uploads from './basicComponent/Uploads'
// import MoreUploads from './basicComponent/MoreUploads'
import checkboxTime from './basicComponent/checkboxTime'
import lableView from './basicComponent/lableView'
import NumberInput from './basicComponent/NumberInput'
// import ImgView from './basicComponent/ImgView'
import CheckBox from './basicComponent/CheckBox'
import RadioBox from './basicComponent/RadioBox'
// import SelectView from './basicComponent/SelectView'
import clickLink from './basicComponent/clickLink'
import Tinymce from './basicComponent/Tinymce'
// import BusinessTerm from './basicComponent/BusinessTerm'
// import WxUploads from './basicComponent/WxUploads'
// import AddInput from './basicComponent/AddInput'
import DateTimePicker from './basicComponent/DateTimePicker'
import sendCode from './basicComponent/sendCode'
import { validateIdCode } from '@/utils/validate.js'
export default {
  name: 'FormGenerator',
  components: {
    SelectList,
    SelectListNew,
    TextInput,
    TimeSelector,
    // DaterangeSelector,
    Uploads,
    // MoreUploads,
    checkboxTime,
    lableView,
    NumberInput,
    // ImgView,
    CheckBox,
    // SelectView,
    clickLink,
    Tinymce,
    RadioBox,
    // BusinessTerm,
    // WxUploads,
    // AddInput,
    DateTimePicker,
    sendCode
  },
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Object,
      default: () => {}
    },
    slotList: {
      type: Array,
      default: () => []
    },
    cache: {
      type: Boolean,
      default: true
    },
    dialogVisible: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    disabledbut: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      disBut: false,
      varlast: null,
      varnow: null,
      validate: [{ required: true, message: '请输入', trigger: 'blur' }],
      formData: this.value,
      onSubmitText: this.config.buttons ? this.config.buttons.onSubmitText || '确定' : '',
      onBackText: this.config.buttons ? this.config.buttons.onBackText || '取消' : ''
    }
  },
  watch: {
    value(val) {
      this.formData = this.value
    },
    disabledbut(val) {
      if (!val) {
        // console.log(val)
        // this.disBut = val
      }
    }
  },
  methods: {
    gotoback() {
      this.$router.go(-1)
    },
    // 返回值
    formDataAction(data, name) {
      const str = name.split('.')
      if (str.length >= 2) {
        return data[str[0]][str[1]]
      } else {
        return data[name]
      }
    },
    NorequiredVal(rule, value, callback) {
      if (value) {
        if (validateIdCode(value)) {
          callback()
        } else {
          callback(new Error('输入的身份证有误！'))
        }
      } else {
        callback()
      }
    },
    requiredVal(rule, value, callback) {
      if (value && validateIdCode(value)) {
        callback()
      } else {
        callback(new Error('输入的身份证有误！'))
      }
    },
    // 校验规则
    validateAction(val, lable) {
      if (val === 'required') {
        return [{ required: true, message: '请输入' + lable, trigger: 'blur' }]
      }
      if (val === 'select') {
        return [{ required: true, message: '请选择' + lable, trigger: 'change' }]
      }
      if (val === 'array') {
        return [{ type: 'array', required: true, message: '请选择' + lable, trigger: 'blur' }]
      }
      if (val && val.indexOf('validateIdCode') > -1) {
        if (val.indexOf('required') > -1) {
          return [{ validator: this.requiredVal, required: true, trigger: 'blur' }]
        }
        return [{ validator: this.NorequiredVal, trigger: 'blur' }]
      }
    },
    updateForm(fieldName, value) {
      console.log(fieldName, value)
      const str = fieldName.split('.')
      if (str.length >= 2) {
        this.formData[str[0]][str[1]] = value
      } else {
        this.formData[fieldName] = value
      }
    },
    submit() {
      this.varlast = Date.now()
      this.$refs['formData'].validate(valid => {
        // 校验通过后  控制3秒后才能再次调用
        if (valid) {
          if (this.varnow) {
            if (this.varlast - this.varnow > 2000) {
              this.varnow = Date.now()
              this.varlast = this.varnow
              this.$emit('submit')
            }
          } else {
            this.varnow = Date.now()
            this.varlast = this.varnow
            this.$emit('submit')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$refs['formData'].resetFields()
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.interForm {
  display: inline-block;
  width: 49%;
  vertical-align: text-top;
}
.moreForm {
  padding: 0 0.3rem 0 0;
  box-sizing: border-box;
}
.lable_Css {
  display: inline-block;
  line-height: 0.18rem;
}
.rules_Css {
  float: right;
  display: inline-block;
  width: 0.9rem;
  line-height: 0.2rem;
}
</style>
